<template>
  <el-dialog v-model="visible" :close-on-click-modal="false" :title="titleMap[mode]" :width="650" destroy-on-close
             @closed="$emit('closed')">
    <el-form ref="dialogForm" :disabled="mode == 'show'" :model="form" :rules="rules" label-position="right" label-width="120px">
      <el-form-item label="课时名称" prop="name">
        <el-input v-model="form.name" clearable maxlength="50" placeholder="请输入课时名称" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="form.sort" clearable placeholder="请输入排序" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="实际时长" prop="sort">
        <el-input-number v-model="form.num" :min="1" :max="10" label="实际时长"></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button v-if="mode != 'show'" :loading="isSaveing" type="primary" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ['success', 'closed'],
  props: {
    parentId: {
      type: Number,
      default: () => {
        return 0
      }
    },
  },
  data() {
    return {
      mode: "add",
      titleMap: {
        add: '新增课时',
        edit: '编辑课时',
        show: '查看'
      },
      visible: false,
      isSaveing: false,
      //表单数据
      form: this.getDefaultRuleForm(),
      //验证规则
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        sort: [
          {
            required: false,
            validator: (rule, value, callback) => {
              var myreg = /^(-|[0-9])\d*$/;
              if (!value) {
                callback(new Error('请输入排序'))
              } else if (!myreg.exec(value)) {
                callback(new Error('只能输入整数'))
              } else {
                callback()
              }
            }
          },
        ]
      },
    }
  },
  mounted() {
  },
  methods: {
    //显示
    open(mode = 'add') {
      this.mode = mode;
      this.visible = true;
      return this
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (!valid) {
          return false
        }

        let data = {}
        for (let key in this.form) {
          data[key] = this.form[key]
        }

        try {
          this.isSaveing = true;
          if (this.form.id) {
            await this.$API.agent.level.action.put(data)
          } else {
            await this.$API.agent.level.action.post(data)
          }
          this.$emit('success', this.form, this.mode)
          this.visible = false;
          this.$notify.success("保存成功")
        } finally {
          this.isSaveing = false;
        }
      })
    },
    //表单注入数据
    setData(data) {
      let _form = {
        id: data.id,
        name: data.name,
        amount: data.amount,
        classHourSixty: data.classHourSixty,
        sort: data.sort + ''
      }

      this.form = _form
      return this
    },
    getDefaultRuleForm() {
      return {
        id: null,
        name: '',
        sort: '0',
        num: '0'
      }
    },
  }
}
</script>

<style>
</style>
